<template>
	<view class="detail">
		<view class="search">
			<view class="account-type" @tap="showstatusList=true">
				<view>{{statusList[account_type_index]['type_name']}}</view>
				<view class="iconfont icon-down"></view>
			</view>
			<view class="type" @tap="showTypeList=true">
				<view>{{typeList[type_index]['type_name']}}</view>
				<view class="iconfont icon-down"></view>
			</view>
			<view class="search-btn" @tap="search()">搜索</view>
		</view>
		
		<view class="uni-list" v-if="list.length> 0">
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate">
					<view class="info">
						<view>{{item.account_type}}</view>
						<view>【{{item.type_text}}】 {{item.remark}}</view>
						<view>{{item.create_time}}</view>
					</view>
					<view class="amount text-success">
						+￥{{item.amount}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="no-data" v-else>没有相关记录</view>
		
		<mask-select :show="showstatusList" @hidePopup="hideMask" title="选择返利状态">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="select_account_type(item, index)" v-for="(item,index) in statusList" :key="index">
					<view class="uni-list-cell-navigate account-item">
						<view class="logo">{{item.type_name}}</view>
						<view class="select-icon">
							<image :src="index == account_type_index?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
		
		<mask-select :show="showTypeList" @hidePopup="hideMask" title="选择资金类型">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="select_type(item, index)" v-for="(item,index) in typeList" :key="index">
					<view class="uni-list-cell-navigate account-item">
						<view class="logo">{{item.type_name}}</view>
						<view class="select-icon">
							<image :src="index == type_index?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import maskSelect from '../../components/mask-select.vue';
	
	export default {
		components: {
			maskSelect
		},
		data() {
			return {
				list:[],
				page: 1,
				nextPage: true,
				statusList: [
					{type_id: '', type_name: '全部状态'},
				],
				typeList: [
					{type_id: '', type_name: '全部类型'},
				],
				showMask: false,
				showstatusList: false,
				showTypeList: false,
				account_type_index: 0,
				type_index: 0,
			};
		},
		onLoad() {
			this.getTypeList();
			this.getDetail();
		},
		onReachBottom() {
			this.getDetail();
		},
		methods: {
			//获取帐单数据
			getDetail: function(){
				if(this.nextPage === false) {
					return;
				}
				
				var url = 'funds/rebateRecord';
				var that = this;

				var data = {
					page: that.page,
					status: that.statusList[that.account_type_index]['type_id'],
					type: that.typeList[that.type_index]['type_id']
				}
				
				Request.send({
					url: url,
					data: data,
					sCallback: function(res) {
						that.list = that.list.concat(res.data);
						that.page ++;
						if(res.data.length < 20) {
							that.nextPage = false;
						}
					}
				});
			},
			//获取帐户及操作类型
			getTypeList: function(){
				var url = 'funds/getRebateTyep';
				var that = this;
				Request.send({
					url: url,
					data: {},
					sCallback: function(res) {
						that.statusList = that.statusList.concat(res.data.status_list);
						that.typeList = that.typeList.concat(res.data.type_list);
					}
				});
			},

			//选择帐单类型
			select_type: function(item, index) {
				this.type_index = index;
				this.hideMask();
			},
			//选择帐户类型
			select_account_type: function(item, index){
				this.account_type_index = index;
				this.hideMask();
			},

			//搜索
			search: function(){
				this.page = 1;
				this.list = [];
				this.nextPage= true;
				this.getDetail();
			},
			hideMask(){
				this.showMask = this.showstatusList = this.showTypeList = false;
			}
		}
	}
</script>

<style>
	.detail{
		font-size: 28upx;
	}
	
	
		.search{
			display: flex;
			height: 45px;
			justify-content: center;
			align-items: center;
			background: #fff;
			z-index: 99;
			line-height: 45px;
			text-align: center;
		}
		.search .account-type, .search .type{
			flex:1;
			font-size: 10px;
			border-bottom: 1px solid #eee;
			display: flex;
			flex: row;
			justify-content: center;
			align-items: center;
		}

		.search .search-btn{
			background: #3385ff;
			color: #fff;
			width: 80px;
			border-bottom: 1px solid #3385ff;
		}

		.search .mui-icon{
			font-size: 16px;
		}
		
		.account-item .logo, .account-item .select-icon{
			display: flex;
			align-items: center;
		}
		
		.account-item .select-icon image{
			width: 60upx;
			height: 60upx;
		}
</style>
